import sty from '@/style.module/editor/components/PaintingTool/PagingToolPanel.module.scss';
import {Button} from '@arco-design/web-react';
import classnames from 'classnames';

export default function PagingToolPanel() {
    const [entranceAnimates] = useState([
        {name: '渐显淡入', value: 'animate__fadeIn'},
        {name: '从上淡入', value: 'animate__fadeInDown'},
        {name: '从下淡入', value: 'animate__fadeInUp'},
        {name: '从左淡入', value: 'animate__fadeInLeft'},
        {name: '从右淡入', value: 'animate__fadeInRight'},
        {name: '左上淡入', value: 'animate__fadeInTopLeft'},
        {name: '右上淡入', value: 'animate__fadeInTopRight'},
        {name: '左下淡入', value: 'animate__fadeInBottomLeft'},
        {name: '右下淡入', value: 'animate__fadeInBottomRight'},
    ]);

    const [currentHoverEntrance, setCurrentHoverEntrance] = useState('');
    const [hoverClassNameEntrance, setHoverClassNameEntrance] = useState('');

    const onMouseEnterEntrance = (index: number) => {
        setCurrentHoverEntrance(entranceAnimates[index].value);
        setHoverClassNameEntrance(
            `animate__animated ${entranceAnimates[index].value}`,
        );
    };

    const onMouseLeaveEntrance = () => {
        setCurrentHoverEntrance('');
        setHoverClassNameEntrance('');
    };

    const [exarchAnimates] = useState([
        {name: '渐隐淡出', value: 'animate__fadeOut'},
        {name: '向下淡出', value: 'animate__fadeOutDown'},
        {name: '向上淡出', value: 'animate__fadeOutUp'},
        {name: '向右淡出', value: 'animate__fadeOutLeft'},
        {name: '向左淡出', value: 'animate__fadeOutRight'},
        {name: '向右下淡出', value: 'animate__fadeOutTopLeft'},
        {name: '向左下淡出', value: 'animate__fadeOutTopRight'},
        {name: '向右上淡出', value: 'animate__fadeOutBottomLeft'},
        {name: '向左上淡出', value: 'animate__fadeOutBottomRight'},
    ]);

    const [currentHoverExarch, setCurrentHoverExarch] = useState('');
    const [hoverClassNameExarch, setHoverClassNameExarch] = useState('');

    const onMouseEnterExarch = (index: number) => {
        setCurrentHoverExarch(exarchAnimates[index].value);
        setHoverClassNameExarch(
            `animate__animated ${exarchAnimates[index].value}`,
        );
    };

    const onMouseLeaveExarch = () => {
        setCurrentHoverExarch('');
        setHoverClassNameExarch('');
    };

    return (
        <div className={sty.container}>
            <p className={sty.title}>入场动画</p>
            <table className={sty.table} border={1}>
                <tbody className={sty.tbody}>
                    {entranceAnimates.map((_, index) =>
                        index % 2 === 0 ? (
                            <tr key={index}>
                                <td
                                    className={sty.cardContainer}
                                    p-value={entranceAnimates[index].value}
                                    onMouseEnter={() => {
                                        onMouseEnterEntrance(index);
                                    }}
                                    onMouseLeave={onMouseLeaveEntrance}
                                >
                                    <div className={sty.card}>
                                        <div
                                            className={classnames(
                                                currentHoverEntrance ===
                                                    entranceAnimates[index]
                                                        .value
                                                    ? hoverClassNameEntrance
                                                    : '',
                                            )}
                                        ></div>
                                        <p>{entranceAnimates[index].name}</p>
                                    </div>
                                </td>
                                {entranceAnimates[index + 1] ? (
                                    <td
                                        className={sty.cardContainer}
                                        p-value={
                                            entranceAnimates[index + 1].value
                                        }
                                        onMouseEnter={() => {
                                            onMouseEnterEntrance(index + 1);
                                        }}
                                        onMouseLeave={onMouseLeaveEntrance}
                                    >
                                        <div className={sty.card}>
                                            <div
                                                className={classnames(
                                                    currentHoverEntrance ===
                                                        entranceAnimates[
                                                            index + 1
                                                        ].value
                                                        ? hoverClassNameEntrance
                                                        : '',
                                                )}
                                            ></div>
                                            <p>
                                                {
                                                    entranceAnimates[index + 1]
                                                        .name
                                                }
                                            </p>
                                        </div>
                                    </td>
                                ) : null}
                            </tr>
                        ) : null,
                    )}
                </tbody>
            </table>
            <Button type='outline' className={sty.full}>
                应用到全部
            </Button>

            <p className={sty.title}>退场动画</p>
            <table className={sty.table} border={1}>
                <tbody className={sty.tbody}>
                    {exarchAnimates.map((_, index) =>
                        index % 2 === 0 ? (
                            <tr key={index}>
                                <td
                                    className={sty.cardContainer}
                                    p-value={exarchAnimates[index].value}
                                    onMouseEnter={() => {
                                        onMouseEnterExarch(index);
                                    }}
                                    onMouseLeave={onMouseLeaveExarch}
                                >
                                    <div className={sty.card}>
                                        <div
                                            className={classnames(
                                                currentHoverExarch ===
                                                    exarchAnimates[index].value
                                                    ? hoverClassNameExarch
                                                    : '',
                                            )}
                                        ></div>
                                        <p>{exarchAnimates[index].name}</p>
                                    </div>
                                </td>
                                {exarchAnimates[index + 1] ? (
                                    <td
                                        className={sty.cardContainer}
                                        p-value={
                                            exarchAnimates[index + 1].value
                                        }
                                        onMouseEnter={() => {
                                            onMouseEnterExarch(index + 1);
                                        }}
                                        onMouseLeave={onMouseLeaveExarch}
                                    >
                                        <div className={sty.card}>
                                            <div
                                                className={classnames(
                                                    currentHoverExarch ===
                                                        exarchAnimates[
                                                            index + 1
                                                        ].value
                                                        ? hoverClassNameExarch
                                                        : '',
                                                )}
                                            ></div>
                                            <p>
                                                {exarchAnimates[index + 1].name}
                                            </p>
                                        </div>
                                    </td>
                                ) : null}
                            </tr>
                        ) : null,
                    )}
                </tbody>
            </table>
            <Button type='outline' className={sty.full}>
                应用到全部
            </Button>
        </div>
    );
}
